<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      align="center"
      header-align="center">
    </el-table-column>
    <el-table-column
      prop="expend"
      label="支出"
      align="right"
      header-align="center">
    </el-table-column>
    <el-table-column
      prop="income"
      label="收入"
      align="right"
      header-align="center">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MonthRecord',
  created() {
    this.getMonthRecord()
  },
  methods: {
    getMonthRecord: function () {
      this.axios.post('/record/monthRecord').then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data.map(r => {
            r.date = `${r.year}-${r.month}`
            return r
          });
        }
      })
    }
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
